<template>
  <div class="home  animated bounceInLeft">
    <div class="phone-technology-menu  container-fluid">
      <div class="row">
        <div style="margin-left: 25px;">
          查看更多文章分类：
          <a style="margin: 0 10px;" @click="getArticleList()">全部</a>
          <span v-for="(item,index) in menuList" :key="index">
                        <a style="margin: 0 10px;" @click="getTypeArticle(item)">{{item|match(item.type_id)}}</a>
                    </span>
        </div>
      </div>
    </div>
    <ul class="home-list">
      <li v-for="(item,index) in articleLists" :key="index">
        <div class="home-list-header">
          <p>{{item.title}}
            <span class="label label-info" style="font-size: 10px" @click="getTypeArticle(item.type_id)">{{item.type_id | match}}</span>
          </p>
        </div>
        <p class="home-list-main">
          {{ToText(item.content)}}
        </p>
        <div class="home-list-footer">
          <a class="btn btn-danger" @click="addSign(item)">More</a>
          <div class="article-info">
            <div>
              <i class="iconfont">&#xe67c;</i>
              <span>{{item.create_time |dateFmt }}</span>
            </div>
            <div>
              <i class="iconfont">&#xe681;</i>
              <span>{{item.sign}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        menuList: [],
        articleLists: [],
        articleNum: 0,
      }
    },
    filters: {
      //将后端传过来的类型转化成能用的
      match(type_id) {
        switch (type_id) {
          case 1:
            return "Vue";
          case 2:
            return "javascript";
          case 3:
            return "UI组件";
          case 4:
            return "Node";
            break;
        }
      },
    },
    components: {},
    created() {
      this.getArticleList()
    },
    methods: {
      //只提取html文本中的TXT文本
      ToText(HTML) {
        let input = HTML;
        return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ');
      },
      //获取文章列表数据
      getArticleList() {
        //菜单列表
        let newString = [];
        this.getAxios("/article/all").then(res => {
          let listArr = res.list;
          //去重 type_id
          for (let i = 0; i < listArr.length; i++) {
            let arry = listArr[i].type_id;
            newString.push(arry);
          }
          //获取菜单列表
          this.menuList = [...new Set(newString)];
          console.log([...new Set(newString)]);
          //获取所有文章列表
          this.articleLists = listArr;
          //将文章数存到Vuex中方便Me组件调用数据
          this.$store.commit('set_article_num', res.list.length)
        })
      },
      // 通过type_id查询文章
      getTypeArticle(item) {
        console.log(item);
        this.getAxios('/article/articletype?type_id='+item).then(res => {
          this.articleLists = res.list
        }).catch(err=>{
          console.log(err);
        });
      },
      //  增加观看数
      addSign(item) {
        this.$router.push({name: "Detail", params: {id: item.id}})
        this.getAxios(`/article/updatesign?id=${item.id}&sign=${item.sign + 1}`).then(res => {
          console.log(res.msg);
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .home {
    & > .app-top {
      background: url("../../assets/img/appTop2.png");
      background-size: 100% 100%;
    }
  }

  /*...........................*/
  .home-list {
    & > li {
      padding: 20px 25px;
      margin: 30px 0;
      box-sizing: border-box;
      border-bottom: 1px solid silver;

      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }
    }
  }

  .home-list-footer, .home-list-header {
    display: flex;
    justify-content: space-between;
  }

  .home-list-header {
    & > p {
      font-size: 25px;

      & > small {
        width: 30px;
        height: 10px;
        font-size: 10px;
        border: 1px solid silver;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
      }
    }
  }

  .home-list-main {
    width: 100%;
    text-indent: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .article-info {
    display: flex;

    & > div {
      margin: 0 10px;
      display: flex;
      align-items: center;

      & > i {
        margin: 0 5px;
      }
    }
  }

  .home-pagination {
    width: 100%;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-bottom: 60px;

    & > li {
      width: 30px;
      margin: 0 10px;
    }
  }

  .phone-technology-menu {
    border-bottom: 1px solid silver;
    padding: 20px 0;

    .col-xs-4 {
      padding: 10px;
    }

    p {
      display: block;
    }
  }
</style>
